<template>
  <div class="stop">
    <el-table
    :data="garageList"
    style="width: 100%"
    @current-change="getGarage">
    <el-table-column  type="index" label="序号" width="150">
      </el-table-column>
    <el-table-column label="车位位置" width="220" prop="location">
    </el-table-column>
    <el-table-column label="车位状态" width="180">
      <template slot-scope="scope">
        <!-- 根据state展示车位状态 -->
        <el-tag type="success" v-if="scope.row.state == 0">空闲</el-tag>
        <el-tag type="danger" v-if="scope.row.state == 1">繁忙</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="车位价格(/小时)" width="220" prop="price">
    </el-table-column>
    <el-table-column label="一键预约">
      <template slot-scope="scope">
        <!-- 判断是否为空闲状态 是否禁用停车按钮 -->
        <el-button type="success" icon="el-icon-check" circle @click="stop" :disabled="scope.row.state == 0 ? false : true">
    </el-button>
     </template>    
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <pagination v-show="t>0" :total="t" :page.sync="currentPage" :limit.sync="pageSize" @pagination="getData" />
  </div>
</template>

<script>
import Pagination from '@/components/Header/Pagination.vue'
import { mapState } from 'vuex'
import { freeGarage,stopCar } from '@/api'
export default {
    name:'StopIndex',
    components:{
      Pagination,
    },
    data() {
      return {
        currentPage: 1,  // 当前页码-默认首页
        pageSize: 10,  // 每页显示的行数
        garageId:0,//车位id
        total:1,
      }
    },
    computed:{
      ...mapState(['garageList']),
      t:function(){
      return this.$store.state.t
     }
    },

    mounted(){
      //组件挂载完成时调用
      this.getData(this.currentPage)
      //查询有无空余车位
      freeGarage().then((res)=>{
        if(!res.success){
          this.$alert(res.errorMsg)
        }
      })
    },
    methods: {
       //API请求车位数据
      getData(){
        var data = {};
        data.currentPage = this.currentPage
        data.pageSize = this.pageSize
        this.$store.dispatch('getGarage',data)
      },
      //获取当前车位对象
      getGarage(garage){
      this.garageId = garage.garageId
      },
      //获取当前车位状态
      stop() {
        const userId = sessionStorage.getItem('userId')
        this.$confirm('您确定预约该车位吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //执行停车的操作
          stopCar(this.garageId,userId).then((res)=>{
            if(res.success){
              this.$message(
                {
                type: 'success',
                message: '预约停车成功!'
              });
              // //执行成功后 重新请求API接口 刷新数据
              this.getData(this.currentPage)
            }else{
              this.$message({
                type: 'info',
                message: res.errorMsg
              });  
                }})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      }
    },
}
</script>

<style scoped>
  .stop{
    margin-left: 260px;
    margin-top: 30px;
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>